<template>
    <div class="wrapper">
        <el-card>
            <div class="rowDiv" style="padding: 0">
                <div class="row-left">
                    <div class="row-item">
                        所属部门:
                        <el-select
                                clearable
                                v-model="state.form.department_name"
                                @change="index_change"
                                placeholder="所属部门"
                        >
                            <template v-for="child in state.form.departSelectArr" :key="child.id">
                                <el-option :value="child.id" :label="child.name"></el-option>
                            </template>
                        </el-select>
                    </div>
                    <div class="row-item">
                        所属职位:
                        <el-select
                                clearable
                                @change="index_change"
                                v-model="state.form.job_name"
                                placeholder="选择所属职位"
                        >
                            <template v-for="child in state.form.belong_jobArr" :key="child.id">
                                <el-option :value="child.id" :label="child.name"></el-option>
                            </template>
                        </el-select>
                    </div>
                </div>
                <div class="row-right">
                    <searchDiv
                            :placeholder="state.placeholder"
                            @searchClick="searchClick"
                    ></searchDiv>&nbsp;&nbsp;
                    <el-button type="primary" @click="createDepartment()"
                    >创建用户
                    </el-button>
                </div>
            </div>
            <!-- 页面加载 -->
            <el-table
                    class="text-center"
                    :data="state.tableData"
                    :align="center"
                    style="width: 100%; margin-top: 20px"
            >
                <el-table-column prop="id" label="员工ID" width="100"></el-table-column>
                <el-table-column prop="account" label="登录用户"></el-table-column>
                <el-table-column prop="department_name" label="所属部门"></el-table-column>
                <el-table-column prop="emptype" label="所属职位"></el-table-column>
                <el-table-column prop="username" label="姓名"></el-table-column>
                <el-table-column prop="creater_name" label="创建人"></el-table-column>
                <el-table-column prop="add_time" label="注册时间"></el-table-column>
                <el-table-column label="门店数量">
                    <template v-slot="scope">
                        <el-button @click="has_store(scope)" type="text">
                            {{ scope.row.store_count }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="权限">
                    <template v-slot="scope">
                        <el-button
                                @click.native.prevent="new_powerDrawer(scope.row)"
                                type="text"
                                size="small"
                        >
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                                @click.native.prevent="bind_store(scope.row)"
                                type="text"
                                size="small"
                        >
                            绑定门店
                        </el-button>
                        <el-button
                                @click.native.prevent="edit_depart(scope.row)"
                                type="text"
                                size="small"
                        >
                            编辑
                        </el-button>
                        <el-button
                                style="color:green;"
                                v-if="scope.row.staff_status!=10"
                                @click.native.prevent="deleteRow(scope.row)"
                                type="text"
                                size="small"
                        >
                            启用
                        </el-button>
                        <el-button
                                style="color:red;"
                                v-else
                                @click.native.prevent="deleteRow(scope.row)"
                                type="text"
                                size="small"
                        >
                            禁用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page v-if="state.totalPage" :totalPage="state.totalPage" @changePage="changePage"></Page>
            <!-- 创建员工弹窗 -->
            <el-dialog
                    :title="state.good_title"
                    v-model="state.depart_dialogVisible"
                    width="18%"
                    center
                    ref="form"
            >
        <span>
          <el-form
                  :model="state.form"
                  :rules="state.rules"
                  ref="form"
                  label-width="100px"
                  class="demo-ruleForm"
          >
            <el-form-item label="登录手机" prop="phone">
              <el-input
                      type="text"
                      v-model="state.form.phone"
              ></el-input>
            </el-form-item>
             <el-form-item label="姓名" prop="username">
              <el-input
                      type="text"
                      v-model="state.form.username"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="belong_part_name">
              <el-select
                      type="date"
                      placeholder="请选择"
                      filterable
                      @change="change_up_charge"
                      v-model="state.form.belong_part_name"
                      style="width: 100%"
              >
                <template v-for="child in state.form.departSelectArr" :key="child.id">
                  <el-option :value="child.id" :label="child.name"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="所属职位" prop="belong_job_name">
              <el-select
                      type="date"
                      placeholder="请选择"
                      filterable
                      @change="change_charge_man"
                      v-model.number="state.form.belong_job_name"
                      style="width: 100%"
              >
                <template v-for="child in state.form.belong_jobArr" :key="child.id">
                  <el-option
                          :value="child.id"
                          :label="child.name"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-form>
        </span>
                <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.depart_dialogVisible = false"
            >取 消</el-button
            >
            <el-button type="primary" @click="create()">确 定</el-button>
          </span>
                </template>
            </el-dialog>
            <!-- 抽屉组件 -->
            <Drawer
                    :title="state.current_title"
                    :drawer="state.drawer"
                    @closeFun="closeFun"
            >
                <!-- 作用域插槽 -->
                <!-- 地区 运营  搜索 -->
                <template v-slot:form_option>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="row-item">
                                <div>地区:</div>
                                <el-select
                                        clearable
                                        v-model="state.address"
                                        @change="commonChange"
                                        placeholder="选择地区"
                                >
                                    <template v-for="item in state.addressArr">
                                        <el-option :label="item.name" :value="item.id"></el-option>
                                    </template>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="row-item">
                                <div>客户经理:</div>
                                <el-select
                                        clearable
                                        v-model="state.custom"
                                        @change="commonChange"
                                        placeholder="选择客户经理"
                                >
                                    <template v-for="item in state.customArr">
                                        <el-option :label="item.name" :value="item.id"></el-option>
                                    </template>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="row-item">
                                <div>运营经理:</div>
                                <el-select
                                        clearable
                                        v-model="state.sport"
                                        @change="commonChange"
                                        placeholder="选择运营经理"
                                >
                                    <template v-for="item in state.sportArr">
                                        <el-option :label="item.name" :value="item.id"></el-option>
                                    </template>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="row-item">
                                <el-input
                                        clearable
                                        type="text"
                                        v-model="state.common_keyword"
                                ></el-input>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </template>
                <!-- 已绑定的内容 -->
                <template v-slot:look_store v-if="state.is_show_type">
                    <el-table
                            class="text-center"
                            :data="state.already_store"
                            ref="multipleTable"
                            max-height="500"
                            @selection-change="handleSelectionChange"
                            :align="center"
                            style="width: 100%; margin-top: 20px"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="store_id" label="部门ID"></el-table-column>
                        <el-table-column
                                prop="store_num"
                                label="门店编号"
                        ></el-table-column>
                        <el-table-column prop="store_name" label="门店名称">
                        </el-table-column>
                        <el-table-column prop="boss_name" label="掌柜"></el-table-column>
                        <el-table-column prop="area" label="地区"></el-table-column>
                        <el-table-column prop="manager_name" label="客户经理">
                        </el-table-column>
                        <el-table-column prop="operations_name" label="运营经理">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button
                                        @click.native.prevent="unbindBtn(scope.row)"
                                        type="text"
                                        size="small"
                                >
                                    解绑
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="rowDiv" style="width: 20%">
                        <el-col :span="3">
                            <el-checkbox
                                    @change="checkAll"
                                    v-model="state.pageChecked"
                                    label="本页全选"
                                    name="type"
                            ></el-checkbox>
                        </el-col>
                        <el-button @click="unbind_all_Btn">解绑</el-button>
                    </div>
                </template>
                <!-- 绑定的内容 -->
                <template v-slot:bind_store v-else>
                    <el-table
                            class="text-center"
                            :data="state.storeData"
                            :align="center"
                            ref="multipleTable"
                            max-height="500"
                            @selection-change="handleSelectionChange"
                            style="width: 100%; margin-top: 20px"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="store_id" label="部门ID"></el-table-column>
                        <el-table-column
                                prop="store_num"
                                label="门店编号"
                        ></el-table-column>
                        <el-table-column prop="store_name" label="门店名称">
                        </el-table-column>
                        <el-table-column prop="boss_name" label="掌柜"></el-table-column>
                        <el-table-column prop="area" label="地区"></el-table-column>
                        <el-table-column prop="manager_name" label="客户经理">
                        </el-table-column>
                        <el-table-column prop="operations_name" label="运营经理">
                        </el-table-column>
                    </el-table>
                    <div class="rowDiv">
                        <el-col :span="6">
                            <el-checkbox
                                    @change="checkAll"
                                    v-model="state.pageChecked"
                                    label="本页全选"
                                    name="type"
                            ></el-checkbox>
                            <!-- <el-checkbox
                              @change="checkAll"
                              v-model="state.all_store_check"
                              label="全门店"
                              name="type"
                            ></el-checkbox> -->
                        </el-col>
                        <el-col :span="6">
                            <Page v-if="state.all_page" :totalPage="state.all_page" @changePage="bind_pageFun"></Page>
                        </el-col>
                    </div>
                    <div class="btnGroup">
                        <el-button @click="state.drawer = false">取消</el-button>
                        <el-button type="primary" @click="bind_sub">绑定</el-button>
                    </div>
                </template>
            </Drawer>
            <!-- 权限抽屉组件 -->
            <el-drawer
                    v-model="state.power_drawer"
                    width="60%"
            >
                <power :powerList="state.powerList" :powerType="1" :operationId="state.operationId"></power>
            </el-drawer>
        </el-card>
    </div>
</template>

<script>
    import {ref, nextTick, onMounted, getCurrentInstance, reactive} from "vue";
    import {useRouter} from "vue-router";
    import {ElNotification} from "element-plus";
    import Drawer from "@/components/Drawer.vue";
    import Page from "@/components/Pagination.vue";
    import searchDiv from "@/components/Search.vue";
    import Power from "@/components/Power.vue";

    export default {
        name:"employee_manager",
        components: {
            Drawer,
            Page,
            searchDiv,
            Power
        },
        setup() {
            let form = ref(null);
            let multipleTable = ref(null);
            const {ctx} = getCurrentInstance();
            let state = reactive({
                powerList: [
                    {
                        id: 1,
                        name: '库存系统',
                        selected: false,
                        item: [
                            {
                                id: 1,
                                name: '订单管理',
                                selected: false,
                                item: [
                                    {id: 101, name: "创建订单", selected: false},
                                    {id: 102, name: "订单详情", selected: false},
                                    {id: 103, name: "删除订单", selected: false},
                                    {id: 210, name: "创建订单", selected: false},
                                    {id: 104, name: "订单详情", selected: false},
                                    {id: 105, name: "删除订单", selected: false},
                                    {id: 106, name: "创建订单", selected: false},
                                    {id: 107, name: "订单详情", selected: false},
                                    {id: 108, name: "删除订单", selected: false},
                                    {id: 109, name: "创建订单", selected: false},
                                    {id: 203, name: "订单详情", selected: false},
                                    {id: 209, name: "删除订单", selected: false},
                                ]
                            }
                        ]
                    },
                    {
                        id: 2,
                        name: '门店管理',
                        selected: false,
                        item: [
                            {
                                id: 2,
                                name: '门店管理1',
                                selected: false,
                                item: [
                                    {id: 44, name: "创建门店1", selected: false},
                                    {id: 55, name: "编辑会员信息1", selected: false},
                                ]
                            },
                            {
                                id: 3,
                                name: '门店管理2',
                                selected: false,
                                item: [
                                    {id: 66, name: "创建门店2", selected: false},
                                    {id: 77, name: "编辑会员信息2", selected: false},
                                ]
                            }, {
                                id: 4,
                                name: '门店管理3',
                                selected: false,
                                item: [
                                    {id: 88, name: "创建门店3", selected: false},
                                    {id: 99, name: "编辑会员信息3", selected: false},
                                ]
                            }
                        ]

                    }
                ],
                operationId:0,//当前点击的操作id
                model_type: "",
                placeholder: '',
                totalPage: '', //列表总页数
                current_title: "",
                is_show_type: true, //是否显示绑定门店还是查看已绑定门店
                keyword: "",
                common_keyword: "", //已绑定门店的keyword
                addressArr: [],
                customArr: [],
                sportArr: [],
                address: "",
                custom: "",
                sport: "",
                common_id: "",
                page: 1,
                all_page: 1,
                drawer: false,
                power_drawer: false,
                // all_store_check: false, //全门店
                pageChecked: false, //全选切换状态
                saveCheckList: [],
                multipleSelection: [], //绑定表格
                depart_dialogVisible: false,
                is_open: false,
                form: {
                    belong_part_name: '',
                    belong_job_name: '',
                    department_name: '',
                    departSelectArr: [],
                    job_name: '',
                    belong_jobArr: [],
                    up_charge: "",
                    charge_man: "",
                    phone: "",
                    username: "",
                },
                rules: {
                    department_name: [
                        {required: true, message: "请填写部门名称", trigger: "blur"},
                    ],
                    belong_job_name: [
                        {required: true, message: "请选择所属职位", trigger: "change"},
                    ],
                    belong_part_name: [
                        {required: true, message: "请选择所属部门", trigger: "change"},
                    ],
                    phone: [
                        {required: true, message: "请填写手机号", trigger: "blur"},
                    ],
                    username: [
                        {required: true, message: "请填写员工姓名", trigger: "blur"},
                    ],
                    department_name: [
                        {required: true, message: "请选择所属部门", trigger: "change"},
                    ],
                    job_name: [
                        {required: true, message: "请选择所属职位", trigger: "change"},
                    ],
                },
                up_chargeArr: [],
                charge_manArr: [],
                tableData: [],
                already_store: [], //已绑定门店数据
                storeData: [], //获取绑定门店数据
                unbind_temp: [], //解绑暂存数据
            });
            onMounted(() => {
                get_depart_ajax();
                get_belong_ajax();
                getOrderlist();
                get_common();
            });

            //点击权限
            function new_powerDrawer(item) {
                state.operationId=Number(item.id)
                state.power_drawer=true
            }

            // 触发已绑定门店弹窗
            function has_store(item) {
                clearSelect();
                state.common_id = item.row.id;
                state.current_title = "已绑定门店";
                state.is_show_type = true;
                has_bind_store();
                state.drawer = true;
            }

            // 触发绑定门店弹窗
            function bind_store(item) {
                clearSelect();
                state.common_id = item.id;
                getStorelist();
                state.drawer = true;
                state.is_show_type = false;
                state.current_title = "绑定门店";
            }

            // 获取已绑定门店信息
            function has_bind_store() {
                ctx.$http
                    .get("/tanxiaji/position/staff/store_mange/list/", {
                        id: state.common_id,
                        data_type: 1, //1是员工 10是部门
                        area_id: state.address,
                        manager_id: state.custom,
                        operations_id: state.sport,
                        keywords: state.common_keyword
                    })
                    .then((res) => {
                        if (res.errno == 0) {
                            state.already_store = res.data.data_list;
                            state.all_page = res.data.all_page;
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            // 公共清空下拉所选中的数据
            function clearSelect() {
                state.page = 1;
                state.common_keyword = "";
                state.address = "";
                state.custom = "";
                state.sport = "";
                state.multipleSelection = [];
                state.pageChecked = false;
            }

            // 批量解绑
            function unbind_all_Btn() {
                state.unbind_temp = [];
                console.log("已勾选的", state.multipleSelection);
                state.multipleSelection.forEach((v) =>
                    state.unbind_temp.push(v.store_id)
                );
                if (!state.unbind_temp.length)
                    return ElNotification.error("请勾选再进行操作");
                common_unbindFun();
            }

            // 单一解绑
            function unbindBtn(item) {
                state.unbind_temp = [];
                state.unbind_temp.push(item.store_id);
                common_unbindFun();
            }

            // 公共解绑方法
            function common_unbindFun() {
                ctx.$http
                    .post("/tanxiaji/position/staff/store_mange/remove/", {
                        store_id_list: JSON.stringify(state.unbind_temp),
                        obj_id: state.common_id,
                        data_type: 1, //1 员工 10 部门
                    })
                    .then((res) => {
                        if (res.errno == 0) {
                            ElNotification.success(res.errmsg);
                            has_bind_store();
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            //公共改变
            function commonChange() {
                if (state.is_show_type) {
                    has_bind_store();
                } else {
                    getStorelist();
                }
            }

            // 已绑定个绑定的查询
            function onSubmit() {
                // true 已绑定 false绑定
                if (state.is_show_type) {
                    has_bind_store();
                } else {
                    getStorelist();
                }

            }

            //   打开创建弹窗
            function createDepartment() {
                console.log(form.value)
                state.model_type = "创建";
                state.depart_dialogVisible = true;
                state.common_id = 0;  //0是创建所用
                state.good_title = "创建员工";
                form.value.resetFields();
            }

            // 禁用
            function deleteRow(item) {
                if (confirm("是否进行此操作?")) {
                    ctx.$http
                        .post("/tanxiaji/user_forbid/", {
                            staff_id: item.id,
                        })
                        .then((res) => {
                            if (res.errno == 0) {
                                ElNotification.success(res.errmsg);
                                getOrderlist();
                            } else {
                                ElNotification.error(res.errmsg);
                            }
                        })
                        .catch((err) => {
                            ElNotification.error(err);
                        });
                }
            }

            //获取列表
            function getOrderlist() {
                ctx.$http
                    .get("/tanxiaji/get_user_list/", {
                        index: state.page,
                        count: 20,
                        department_id: state.form.department_name,
                        job_id: state.form.job_name,
                        keywords: state.keyword
                    })
                    .then((res) => {
                        if (res.errno == 0) {
                            state.tableData = res.user_list;
                            console.log(res.total_page_num)
                            state.totalPage = res.total_page_num;
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            // 打开编辑员工
            function edit_depart(item) {
                state.good_title = "编辑员工";
                state.model_type = "编辑";
                state.depart_dialogVisible = true;
                state.common_id = item.id;
                state.form.phone = item.account;
                state.form.username = item.username;
                state.form.belong_part_name = item.department_id;
                state.form.belong_job_name = item.job_id;
            }


            //    提交新创建的用户
            function create() {
                let url = "";
                let data = "";
                if (state.model_type == "创建") {
                    url = "/tanxiaji/user_add/";
                    data = {
                        staff_id: 0,
                        name: state.form.username,
                        phone: state.form.phone,
                        type: state.form.belong_job_name,
                        department: state.form.belong_part_name
                    }
                } else {
                    url = "/tanxiaji/user_edit/";
                    data = {
                        staff_id: state.common_id,
                        name: state.form.username,
                        phone: state.form.phone,
                        type: state.form.belong_job_name,
                        department: state.form.belong_part_name
                    }
                }
                form.value.validate((valid) => {
                    if (valid) {
                        ctx.$http
                            .post(url, data)
                            .then((res) => {
                                if (res.errno == 0) {
                                    ElNotification.success(res.errmsg);
                                    state.depart_dialogVisible = false;
                                    getOrderlist();
                                } else {
                                    ElNotification.error(res.errmsg);
                                }
                            })
                            .catch((err) => {
                                ElNotification.error(err);
                            });
                    } else {
                    }
                });
            }

            // 关闭弹窗
            function closeFun(e) {
                console.log("来自子组件", e);
                state.drawer = e;
                state.power_drawer = false;
            }
            // 关闭弹窗
            function handleClose() {
                state.power_drawer = false;
            }

            //表格选择
            function handleSelectionChange(val) {
                state.multipleSelection = val;
            }

            //全选
            function checkAll() {
                state.multipleSelection = [];
                if (state.pageChecked) {
                    multipleTable.value.toggleAllSelection();
                    state.multipleSelection.push(state.tableData.filter((v) => v.id));
                } else {
                    multipleTable.value.clearSelection();
                    state.multipleSelection = [];
                }
            }

            //列表页数
            function changePage(e) {
                state.page = e;
                getOrderlist();
            }

            //获取绑定门店数据
            //获取列表
            function getStorelist() {
                ctx.$http
                    .get("/tanxiaji/position/staff/store_mange/usable_list/", {
                        index: state.page,
                        count: 1000,
                        id: state.common_id,
                        data_type: 1, //员工1 部门10
                        area_id: state.address,
                        manager_id: state.custom,
                        operations_id: state.sport,
                        keywords: state.common_keyword
                    })
                    .then((res) => {
                        if (res.errno == 0) {
                            state.storeData = res.data.data_list;
                            state.all_page = res.data.all_page;
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            // 绑定门店和已绑定门店分页方法
            function bind_pageFun(e) {
                state.page = 1;
                getStorelist();
            }

            //绑定提交
            function bind_sub() {
                let ids = [];
                state.multipleSelection.forEach((v) => ids.push(v.store_id));
                console.log(ids);
                if (!ids.length) return ElNotification.error("请勾选后在进行操作");
                ctx.$http
                    .post("/tanxiaji/position/staff/store_mange/add/", {
                        store_id_list: JSON.stringify(ids),
                        obj_id: state.common_id,
                        data_type: 1, //1 员工 10 部门
                    })
                    .then((res) => {
                        if (res.errno == 0) {
                            ElNotification.success(res.errmsg);
                            state.drawer = false;
                            getOrderlist();
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            // 修改开关
            function change_Switch(e, data) {
                ctx.$http
                    .post("/tanxiaji/position/department/store_switch/", {
                        id: data.id,
                    })
                    .then((res) => {
                        if (res.errno == 0) {
                            ElNotification.success(res.errmsg);
                            getOrderlist();
                        } else {
                            getOrderlist();
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            //公用地区等下载
            function get_common() {
                ctx.$http
                    .get("/tanxiaji/customer/selection/")
                    .then((res) => {
                        if (res.errno == 0) {
                            state.addressArr = res.data.area_list;
                            state.customArr = res.data.sale_manager_list;
                            state.sportArr = res.data.run_manager_list;
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

// 获取部门ajax
            function get_depart_ajax() {
                ctx.$http
                    .get("/tanxiaji/position/department/data/")
                    .then((res) => {
                        if (res.errno == 0) {
                            state.form.departSelectArr = res.data;
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

// 获取所属职位ajax
            function get_belong_ajax() {
                ctx.$http
                    .get("/tanxiaji/staff/group_list/")
                    .then((res) => {
                        if (res.errno == 0) {
                            state.form.belong_jobArr = res.data;
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

// 员工，部门改变
            function index_change() {
                getOrderlist();
            }

// 搜索
            function searchClick(e) {
                state.keyword = e;
                getOrderlist();
            }

            return {
                bind_pageFun,
                searchClick,
                index_change,
                has_store,
                commonChange,
                onSubmit,
                get_common,
                bind_sub,
                changePage,
                checkAll,
                handleSelectionChange,
                multipleTable,
                form,
                state,
                getOrderlist,
                createDepartment,
                create,
                edit_depart,
                deleteRow,
                bind_store,
                closeFun,
                unbind_all_Btn,
                unbindBtn,
                change_Switch,
                new_powerDrawer
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        .rowDiv {
            display: flex;
            align-items: center;
            padding: 10px 0;
            justify-content: space-between;
            .row-left {
                display: flex;
                align-items: center;
            }
            .row-right {
                display: flex;
                align-items: center;
            }

        }
        .row-item {
            display: flex;
            white-space: nowrap;
            align-items: center;
        }
        .btnGroup {
            width: 30%;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;
        }
        .el-table /deep/ th {
            background-color: #eaeaea;
            text-align: center;
        }
        .el-table /deep/ td {
            text-align: center;
        }
        /deep/ .el-drawer{
            width: 70% !important;
        }
    }
</style>